<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>v-drawer</title>
  </head>
  <body>
    <div id="app">
      <drawer ref="drawerRef">
        <!-- left-area -->
        <drawer-item
          item-pos="left"
          width="200"
          :visible="false"
        >
          <template v-slot:button="props">
            <div class="fold-btn my-column-btn">
              <a-icon
                :type="props.fold ? 'vertical-right' : 'vertical-left'"
              />
            </div>
          </template>
          <template #content>
            <!-- <left-area /> -->
          </template>
        </drawer-item>
        <!-- center-area -->
        <drawer-item item-pos="center">
          <drawer-item item-pos="center"></drawer-item>
          <drawer-item item-pos="bottom" height="200">
            <template v-slot:button="props">
              <div class="fold-btn my-row-btn">
                <a-icon :type="props.fold ? 'down' : 'up'" />
              </div>
            </template>
            <template #content>
              <!-- <bottom-area /> -->
            </template>
          </drawer-item>
        </drawer-item>
        <!-- right-area -->
        <drawer-item item-pos="right" width="200">
          <template v-slot:button="props">
            <div class="fold-btn my-column-btn">
              <a-icon
                :type="props.fold ? 'vertical-left' : 'vertical-right'"
              />
            </div>
          </template>
          <template #content>
            <!-- <left-area /> -->
          </template>
        </drawer-item>
      </drawer>
    </div>
    <script src="./dist/v-drawer.js"></script>
  </body>
</html>
